<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml"> 
<head> 
    <!--
    Created by Artisteer v2.3.0.20943
    Base template (without user's data) checked by http://validator.w3.org : "This page is valid XHTML 1.0 Transitional"
    --> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
	<meta name="keywords" content="crop image,CropZooom, rotate image, zoom image, jquery plugin, crop plugin, zoom plugin, rotation, croppping, zooming" /> 
	<meta name="description" content="CropZoom is a plugin that let you select, rotate and zoom an image to make a crop. This is free and ready to use." />  
    <title>CropZoom another Jquery Plugin</title> 
 
    <script type="text/javascript" src="js/script.js"></script> 
    <link href="css/jquery-ui-1.7.2.custom.css" rel="Stylesheet" type="text/css" /> 
    <link href="css/jquery.cropzoom.css" rel="Stylesheet" type="text/css" /> 
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-1.8.2.custom.js"></script> 
    <script type="text/javascript" src="js/jquery.cropzoom.js"></script> 
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> 
    <style type="text/css"> 
        #zoom,#rot{
            width:360px;
            margin:auto;
            height:25px;
        }
    </style> 
    <script type="text/javascript"> 
    $(document).ready(function(){
       var cropzoom = $('#crop_container').cropzoom({
            width:400,
            height:300,
            bgColor: '#CCC',
            enableRotation:true,
            enableZoom:true,
            zoomSteps:10,
            rotationSteps:10,
            selector:{        
              centered:true,
              borderColor:'blue',
              borderColorHover:'yellow',
              startWithOverlay: false,
              hideOverlayOnDragAndResize: true
            },
            image:{
                source:'chicas1024.jpg',
                width:1024,
                height:768,
                minZoom:10,
                maxZoom:150,
                snapToContainer:false
            }
        });
        $('#crop').click(function(){ 
            cropzoom.send('resize_and_crop.php','POST',{},function(rta){
                $('.result').find('img').remove();
                var img = $('<img />').attr('src',rta);
                $('.result').find('.txt').hide().end().append(img);
            });
        });
        $('#restore').click(function(){
            $('.result').find('img').remove();
            $('.result').find('.txt').show()
            cropzoom.restore();
        });
    });
</script> 
<style type="text/css"> 
	#img_to_crop{
		-webkit-user-drag: element;
		-webkit-user-select: none;
	}
</style> 
</head> 
<body> 
<div id="page-background-simple-gradient"> 
    </div> 
    <div id="page-background-glare"> 
        <div id="page-background-glare-image"></div> 
    </div> 
    <div id="main"> 
        <div class="Sheet"> 
            <div class="Sheet-body"> 
               
                <div class="contentLayout"> 
                    <div class="content"> 
 
                        <div class="Post"> 
                            <div class="Post-body"> 
                        <div class="Post-inner"> 
                                        <div class="PostMetadataHeader"> 
                                            <h2 class="PostHeader"> 
                                                Example 1
                                            </h2> 
                                        </div> 
                                        <div class="PostContent"> 
                                              <div class="boxes"> 
                                                  <div id="crop_container"></div> 
                                                  <div class="result"> 
                                                    <div class="txt">Here you will see the cropped image</div> 
                                                  </div> 
                                                  <div class="cleared"></div> 
                                              </div>  
                                              <br /> 
                                              <span class="button-wrapper" id="crop"> 
                                                    <span class="l"> </span> 
                                                    <span class="r"> </span> 
                                                    <a class="button" href="javascript:void(0)">Crop</a> 
                                              </span> 
                                              &nbsp;
                                              <span class="button-wrapper" id="restore"> 
                                                    <span class="l"> </span> 
                                                    <span class="r"> </span> 
                                                    <a class="button" href="javascript:void(0)">Restore</a> 
                                              </span> 
                                        </div> 
                                        <div class="cleared"></div> 
                        </div> 
                       
                        
                                <div class="cleared"></div> 
                            </div> 
                        </div> 

            </div> 
        </div> 
        <div class="cleared"></div> 
    </div> 

</body> 
</html> 